/* CSS Document */


#sliderwrapper {
position: relative;
height:calc(100vh - 170px);
width:100%;
top:170px;
padding:0 70px;
}

.slider {
width:100%;
height:100%;
position:relative;
z-index:1;
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
}

.overlay {
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0) transparent;
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.4);
}

.text {
position: relative;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
color:#FFFFFF;
max-width:60%;
margin:0 auto;
padding-top:107px;
padding-bottom:70px;
}

.text h3 a{
font-size:18px;
}

.text h5 {
font-size:90px;
line-height:80px;
padding-bottom:0;
letter-spacing:2px;
}

.text h5 strong {
font-size:135px;
line-height:115px;
}

.text a.link  {
display:inline-block;
color:#FFFFFF;
border:solid 2px #FFFFFF;
padding:0 11px;
line-height:40px;
text-decoration:none;
margin-top:30px;
margin-left:50%;
padding-top:3px;
}

.text i {
text-align: center;
font-size: 42px;
color: #FFFFFF;
display: inherit;
text-decoration: none;
}

#projectwrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 80px 0;
  background-color: #e6ecf3;
  }

/*.text a.link:last-of-type {
background-color:#000000;
border:solid 2px #000000;
}  

.text a.link:last-of-type:before {
display: inline-block;
width:20px;
margin-right:8px;
height:18px;
top:2px;
position:relative;
content:"";
background-image:url(../layout/afspraak-icon.png);
background-size:contain;
background-repeat:no-repeat;
background-position:center center;
}*/


.animated {
  -webkit-animation-duration: .9s;
  animation-duration: .9s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes bounce {
  0%, 100% {
    -webkit-transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-7px);
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  margin:0 auto;
  display:block;
}

#streamer {
background-color:#000000;
color:#FFFFFF;
position:absolute;
bottom:0;
left:0;
width:100%;
text-align:center;
font-family: 'Roboto', sans-serif;
font-size:18px;
font-weight:700;
letter-spacing: 2px;
text-transform:uppercase;
padding:15px;
}

#streamer i {
background-color:#FFFFFF;
color:#000000;
width:25px;
height:25px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
text-align:center;
margin-right:20px;
display:inline-block;
line-height: 25px;
  padding-left: 3px;
}

#blockswrapper {
width:100%;
padding: 100px 0;
}

#blocks {
width:100%;
max-width:1310px;
margin:0 auto;
padding:0 70px;
position:relative;
}

.block {
float:left;
width:31.66%;
height:auto;
margin-right:2.5%;
margin-bottom:28px;
position:relative;
}

.block img {
display:block;
width:100%;
height:auto;
}

.block:nth-of-type(3) {
margin-right:0;
}

.block.last {
width:49%;
margin-right:2%;
}

.block:nth-of-type(5) {
margin-right:0;
}

.block .title {
position: absolute;
top: 50%;
left:50%;
-ms-transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
-moz-transform: translateY(-50%) translateX(-50%);
-o-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(255, 255, 255) transparent;
/* RGBa with 0.6 opacity */
background: rgba(255, 255, 255, 0.8);
color:#000000;
width:auto;
min-width:63%;
display:inline-block;
padding:5px 15px;
text-transform:uppercase;
text-align:center;
outline: solid 1px #FFF;
transition: all 0.3s ease;
}

.block:hover .title {
  outline-offset: 5px;
}

.block.last .title {
min-width:233px;
}

#latestwrapper {
    max-width: 1880px;
	margin:0 auto;
padding:40px 70px 70px 70px;
}

#latestwrapper ul {
text-align:center;
width:auto;
margin:0 auto;
padding:0;
padding-bottom:10px;
white-space: nowrap;
overflow: -moz-scrollbars-none;
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}

#latestwrapper ul li {
display:inline-block;
cursor:pointer;
text-transform:uppercase;
padding:3px 12px;
letter-spacing:1px;
scroll-snap-align: start;
border: solid 1px #d5d4d4;
}

#latestwrapper ul li:hover {
color:#f3997b;
}

#latestwrapper ul li.active {
border: solid 1px #000;
}

#instagramwrapper {
width:100%;
}

#instagram {
width:100%;
max-width:1310px;
margin:0 auto;
padding:50px 70px 100px 70px;
}

#newswrapper {
width:100%;
padding-top:50px ;
}

#news {
width:100%;
max-width:1310px;
margin:0 auto;
padding:0 70px;
position:relative;
}

#newsletter {
width:100%;
max-width:1170px;
margin:0 auto;
padding:70px 70px;
position:relative;
background-color:#000000;
color:#FFFFFF;
text-align:center;
}

#latestwrapper h3, #instagramwrapper h3 {
text-align:center;
}

#blocks h3, #news > h3 {
    position: absolute;
    left: 0;
  top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -ms-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
	white-space:nowrap;
}

#blocks h3 {
left:-75px;
}

#news > h3 {
left:70px;
}

#content {
padding-top:100px;
max-width:830px;
text-align:center;
}

h1 {
font-size:22px;
}

@media screen and (max-width: 1240px) {

#sliderwrapper, #blocks, #latestwrapper, #instagram, #newsletter {
padding-left: 55px;
padding-right:55px;
}

.text h3 {
    font-size: 17px;
}

.text h5 {
font-size: 60px;
line-height: 50px;
}

.text h5 strong {
    font-size: 90px;
    line-height: 80px;
}

#blockswrapper, #latestwrapper, #instagram {
padding-bottom:0;
}

#news > h3 {
left:50px;
}

#content {
padding:55px;
}

}

@media screen and (max-width: 1023px) {

#sliderwrapper, #blocks, #latestwrapper, #instagram, #newsletter {
padding-left: 45px;
padding-right:45px;
}

}

@media screen and (max-width: 1100px) {

#news > h3 {
text-align:center;
    position: relative;
    left: inherit;
  top: inherit;
    -ms-transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    transform: none;
    -ms-writing-mode: horizontal-tb;
    -webkit-writing-mode: horizontal-tb;
    -moz-writing-mode: horizontal-tb;
    -ms-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
	white-space:nowrap;
}

} /* end mediaquery */

@media screen and (max-width: 800px) {

#sliderwrapper, #blocks, #latestwrapper, #instagram, #news, #newsletter {
padding-left: 30px;
padding-right:30px;
}

.text {
max-width:80%;
}

.text h3 {
    font-size: 15px;
	line-height:18px;
	text-align:center;
}

.text h5 {
font-size: 40px;
line-height: 30px;
}

.text h5 strong {
    font-size: 60px;
    line-height: 60px;
}

h3.link {
display:none;
}

img.bounce {
padding-top:30px;
width:90px;
height:auto;
}

} /* end mediaquery */

@media screen and (max-width: 550px) {

#blockswrapper {
padding-top: 30px;
}

.block, .block.last {
width:100%;
margin-right:0;
}

} /* end mediaquery */

@media screen and (max-width: 500px) {

#sliderwrapper, #blocks, #latestwrapper, #instagram, #news, #newsletter {
padding-left: 20px;
padding-right:20px;
}

.instagram-image, .instagram-sidecar  {
    width: 50%;
	}
	
	.text h5 {
font-size: 30px;
line-height: 25px;
}

.text h5 strong {
    font-size: 40px;
    line-height: 40px;
}

img.bounce {
width:70px;
}


} /* end mediaquery */